<template>
  <div class="page">
    home
    <div>
      地图示例：

      <!-- TODO这是示例，待删除 -->
      <div :style="{ color: '#333' }">
        <button @click="addPoint()">添加散点</button>
        <button @click="addPolyline()">添加折线</button>
        <button @click="clearLayer()">清除图层</button>
        <button @click="drawPolygon()">开始绘制多边形</button>
      </div>
      <!-- 外部元素必须给定高度 -->
      <div :style="{ height: 'calc(100vh - 110px)' }">
        <BaseMap ref="mapRef" :needControls="true" />
      </div>
    </div>
  </div>
</template>

<script setup name="home">
  // const { proxy } = getCurrentInstance()
  // const router = useRouter()
  // const route = useRoute()

  // <-----------------以下内容是地图使用的示例---------------->
  import BaseMap from '@/components/BaseMap/index.vue';
  const mapRef = ref('');

  const addPoint = () => {
    const addPointLayer = mapRef.value.addPointLayer;
    addPointLayer('1', [30.16, 120.12], { name: '张三', time: '2023-03-13' });
    addPointLayer('2', [30.2, 120.2], { name: '李四', time: '2023-03-12' });
    addPointLayer('3', [30.3, 120.3], { name: 'wang', time: '2023-03-12' });
  };

  const addPolyline = () => {
    const addPolylineLayer = mapRef.value.addPolylineLayer;
    addPolylineLayer('1polyline', [
      [30.16, 120.12],
      [30.2, 120.2],
      [30.3, 120.3],
    ]);
  };
  const clearLayer = () => {
    const clearMapLayer = mapRef.value.clearMapLayer;
    clearMapLayer('1');
    clearMapLayer('2');
    clearMapLayer('3');
    clearMapLayer('1polyline');
  };

  const drawPolygon = () => {
    const drawPolygonFn = mapRef.value.drawPolygon;
    drawPolygonFn();
  };
  // <-----------------以上内容是地图使用的示例---------------->
</script>

<style lang="less" scoped>
  .page {
    color: #fff;
  }
</style>
